<template>
	<view class="content">
		<nav-bar></nav-bar>
		<view class=""><u-swiper :list="swiperList" keyName="pictureurl" @change="swiperChange"
				@click="swiperClick"></u-swiper></view>
		<view><xfx-ssearch ref="zujianch" class="xfx-ssearch" v-model="value" :searchList="list" :isBubble="true"
				@confirm="confirm" @search="search"></xfx-ssearch></view>

		<view style="margin-top:16px;display: grid;grid-template-columns: 50% 50%;grid-template-rows: 78px 78px;">
			<view class="flex flex-row justify-center items-center">
				<image src="../../static/4-1.png" style="width:163px;height:78px;" @click="goSelectSite"></image>
			</view>
			<view class="flex flex-row justify-center items-center">
				<image src="../../static/4-2.png" style="width:163px;height:78px;" @click="goInviteBusiness"></image>
			</view>
			<view class="flex flex-row justify-center items-center">
				<image src="../../static/4-3.png" style="width:163px;height:78px;" @click="goParkOrProject"></image>
			</view>
			<view class="flex flex-row justify-center items-center">
				<image src="../../static/4-4.png" style="width:163px;height:78px;" @click="goGardengat"></image>
			</view>
		</view>
		<view style="margin-top:17px;padding: 0 16px;">
			<view style="border-left: solid 4px #FE7743;margin-bottom: 10px;" class="flex flex-row justify-between">
				<view class="flex flex-row items-center"
					style="padding-left:10px;font-size: 18px;font-weight: 600;color: #000000;letter-spacing: 1px;">精品园区
				</view>
				<view class="flex flex-row items-center" style="font-size: 12px;font-weight: 600;color: #1984C4;"
					@click="goToParkListPage">更多精品园区>></view>
			</view>
			<view>
				<view v-for="(item, index) in yuanquList" :key="index" class="flex flex-row" style="margin-bottom:12px;"
					@click="goToParkDetailPage(item.id)">
					<view class="leftVRretive relative">
						<img :src="item.logourl" style="width: 158px;height:97px;" />
						<view class="leftVR" v-if="item.ifvr == 'Y'">
							<view class="leftVRText">VR</view>
						</view>
					</view>
					<view class="flex-1" style="padding: 0 9px;">
						<view class="flex items-center">
							<view style="font-size: 14px;font-weight: 500;color: #000000;display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;">{{ item.yuanquname }}</view>
							<view class="flex justify-center items-center"
								style="margin-left:5px;width: 15px;height: 15px;background: #FE7743;font-size: 12px;font-weight: 400;color: #FFFFFF;">
								{{ item.yuanqujiaobiao }}
							</view>
						</view>
						<view class="flex" style="margin-top:6px;font-size: 14px;font-weight: 400;color: #000000;">

							<view style="margin-left:3px;font-size: 10px;font-weight: 400;color: #FE7743;">办公房租</view>
							<view style="margin-left:3px;font-size: 10px;font-weight: 400;color: #FE7743;">
								{{ item.bangongfangzu }}元/㎡/天</view>
						</view>
						<view style="margin-top:6px;font-size: 12px;font-weight: 500;color: #CBCDD1;">
							{{ item.provincename }} {{ item.cityname }}</view>
						<view class="flex flex-row" style="margin-top:6px;flex-flow: wrap;">
							<view v-for="(c, cindex) in item.yuanqubiaoqianArr" :key="cindex"
								style="border: solid 1px #FE7743;color: #FE7743;margin:3px;padding: 2px 4px;font-size: 10px;font-weight: 400;color: #FE7743;">
								{{ c }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="margin-top:17px;padding: 0 16px;">
			<view style="border-left: solid 4px #FE7743;margin-bottom: 10px;" class="flex flex-row justify-between">
				<view class="flex flex-row items-center"
					style="padding-left:10px;font-size: 18px;font-weight: 600;color: #000000;letter-spacing: 1px;">
					入驻项目精选</view>
				<view class="flex flex-row items-center" style="font-size: 12px;font-weight: 600;color: #1984C4;"
					@click="goToProjectListPage">更多优质项目>></view>
			</view>
			<view class="flex flex-row" style="height: 120px;overflow-x: scroll;overflow-y: hidden;">
				<view v-for="(item, index) in projectList" :key="index"
					style="padding:13px;border:solid 1px #EDEDED;margin-right:10px;"
					@click="goToProjectDetailPage(item.id)">
					<view class="text-sm"
						style="font-size: 13px;font-weight: 400;color: #000000;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">
						{{ item.projectname }}
					</view>
					<view style="margin-top:9px;display: flex; width: 250px;">
						<view v-for="(bqitem, bqindex) in item.biaoqianArr" :key="bqindex"
							style="font-size: 10px;font-family: PingFangHK-Regular, PingFangHK;font-weight: 400;color: #FE7743;padding-left: 0.125rem;padding-right: 0.125rem;margin-right: 0.375rem;border: 1px solid #FE7743;">
							{{ bqitem }}
						</view>
					</view>
					<view style="margin-top:9px;" class="flex flex-row">
						<view class="flex-1 pt-2.5 text-sm text-[#EE1A23]">
							<view style="font-size: 13px;font-weight: 500;color: #EE1A23;">
								{{ item.touziyuji }}
								<span style="font-size: 11px;font-weight: 400;color: #EE1A23;">万元</span>
							</view>
							<view style="font-size: 12px;font-weight: 400;color: #746F6B;">投资总额</view>
						</view>
						<view class="flex-1 pt-2.5 text-sm text-[#EE1A23]">
							<view style="font-size: 13px;font-weight: 500;color: #EE1A23;">
								{{ item.shuishouyuji }}
								<span style="font-size: 11px;font-weight: 400;color: #EE1A23;">万元</span>
							</view>
							<view style="font-size: 12px;font-weight: 400;color: #746F6B;">预计缴税</view>
						</view>
						<view class="flex justify-end items-end pt-2.5 text-sm text-[#EE1A23]">
							<view class="" style="font-size: 12px;font-weight: 400;color: #8D8D8D;">
								{{ item.luodishijian }} 发布</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="margin-top:17px;padding: 0 16px;">
			<view style="border-left: solid 4px #FE7743;margin-bottom: 10px;" class="flex flex-row justify-between">
				<view class="flex flex-row items-center"
					style="padding-left:10px;font-size: 18px;font-weight: 600;color: #000000;letter-spacing: 1px;">
					热点信息资讯</view>
				<view class="flex flex-row items-center" style="font-size: 12px;font-weight: 600;color: #1984C4;"
					@click="goToNewsListPage">更多>></view>
			</view>
			<view>
				<view class="flex flex-row flex-wrap justify-start" style="margin: 11px auto;">
					<view :class="queryList.zixunleixing ? 'activegay' : 'active'" @click="selectInfoType(0)"
						class="redianxinxi">全部信息</view>
					<view :class="queryList.zixunleixing === item.dictValue ? 'active' : 'activegay'"
						@click="selectInfoType(item.dictValue)" v-for="(item, index) in newsCategoryList"
						class="redianxinxi">
						{{ item.dictLabel }}
					</view>
				</view>
			</view>
			<view v-for="(item, index) in newsList" :key="index" class="flex" style="margin-bottom: 10px;"
				@click="goToNewsDetailPage(item.id)">
				<view style="width:134px;height:78px;">
					<image :src="item.pictureurl" style="width:134px;height:78px;"></image>
				</view>
				<view class="flex flex-col list-main">
					<view class="list-title">{{ item.newsname }}</view>
					<view class="list-jianjie">{{ item.jianjie }}</view>
					<!-- <view class="list-content" v-html="setContent(item.content)"></view> -->
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import xfxSsearch from '@/components/xfx-ssearch/index';
	export default {
		components: {
			xfxSsearch
		},

		data() {
			return {
				list: ['园区', '项目', '资讯'],
				swiperList: [],
				yuanquList: [],
				projectList: [],
				newsList: [],
				newsCategoryList: [],
				queryList: {
					pageNum: 1,
					pageSize: 10,
					queryOption: 0,
					zixunleixing: null
				},
				selectedItem: '筛选',
				value: ''
			};
		},
		onLoad() {
			this.getSwiperList();
			this.getYuanquList();
			this.getProjectList();
			this.getallNewsList();
			this.getNewsCategoryList();
			this.getDictlist();
		},
		onShow() {
			setTimeout(() => {
				this.$refs.zujianch.gdg();
			}, 100);

			console.log(this.$refs);
		},
		methods: {
			confirm(e) {
				console.log('筛选', e);
				/* uni.showToast({
					title: e,
					duration: 2000,
					icon: 'none'
				}); */
				this.selectedItem = e;
			},
			search(e) {
				console.log('chaxun');
				/* uni.showToast({
					title: '搜索',
					duration: 2000
				}); */
				console.log(e);
				if (this.selectedItem === '筛选') {
					uni.showToast({
						title: '请筛选类型',
						icon: 'none'
					});
					return;
				}
				console.log(this.value == undefined);
				if (this.value == undefined || this.value == '') {
					uni.showToast({
						title: '请输入内容',
						icon: 'none'
					});
					return;
				}
				if (this.selectedItem == '园区') {
					// let that = this;
					uni.navigateTo({
						url: '../park/list?yuanquname=' + this.value
					});
				}
				if (this.selectedItem == '项目') {
					// let that = this;
					uni.navigateTo({
						url: '../project/list?projectname=' + this.value
					});
				}
				if (this.selectedItem == '资讯') {
					// let that = this;
					uni.navigateTo({
						url: '../news/list?newsname=' + this.value
					});
				}


			},
			selectInfoType(value) {
				if (value === 0) {
					this.queryList.zixunleixing = null;
					this.getallNewsList();
				} else {
					this.queryList.zixunleixing = value;
					this.getNewsList();
				}
			},
			getSwiperList() {
				let that = this;
				this.$apiCall.request(
					'post',
					'/lunbotu/list', {}, {
						sucCb(data) {
							that.swiperList = data.data;
						}
					}
				);
			},
			getYuanquList() {
				let that = this;
				this.$apiCall.request(
					'post',
					'/yuanqu/list', {}, {
						sucCb(data) {
							that.yuanquList = data.data;
							console.log(that.yuanquList);
						}
					}
				);
			},

			getProjectList() {
				let that = this;
				this.$apiCall.request(
					'post',
					'/project/list', {}, {
						sucCb(data) {
							that.projectList = data.data;
						}
					}
				);
			},
			getallNewsList() {
				let that = this;
				this.$apiCall.request(
					'post',
					`/news/list?pageNum=${this.queryList.pageNum}&pageSize=${this.queryList.pageSize}&queryOption=${this.queryList.queryOption}`, {}, {
						sucCb(data) {
							that.newsList = data.data;
						}
					}
				);
			},
			getNewsList() {
				let that = this;
				this.$apiCall.request(
					'post',
					`/news/list?pageNum=${this.queryList.pageNum}&pageSize=${this.queryList.pageSize}&queryOption=${this.queryList.queryOption}&zixunleixing=${
					this.queryList.zixunleixing
				}`, {}, {
						sucCb(data) {
							that.newsList = data.data;
						}
					}
				);
			},
			getNewsCategoryList() {
				let that = this;
				this.$apiCall.request(
					'get',
					'/dict/list', {
						dictType: 'sys_info_type'
					}, {
						sucCb(data) {
							that.newsCategoryList = data.data;
						}
					}
				);
			},
			getDictlist() {
				let that = this;
				this.$apiCall.request(
					'get',
					'/dict/list', {
						dictType: 'sys_need_type'
					}, {
						sucCb(data) {
							that.dictList = data.data;
							console.log(that.dictList);
						}
					}
				);
			},
			setContent(value) {
				value = value.replace(/<\/?.+?\/?>/g, '');
				if (!value) return '';
				if (value.length > 300) {
					return value.slice(0, 300) + '...';
				}
				return value;
			},
			goToParkListView() {},
			swiperChange() {
				// console.log(this.swiperList);
			},
			swiperClick() {},
			goToParkListPage() {
				uni.navigateTo({
					url: '/pages/park/list'
				});
			},
			goToParkDetailPage(id) {
				uni.navigateTo({
					url: `/pages/park/detail?id=${id}`
				});
			},
			goToProjectListPage() {
				uni.navigateTo({
					url: '/pages/project/list'
				});
			},
			goToProjectDetailPage(id) {
				uni.navigateTo({
					url: `/pages/project/detail?id=${id}`
				});
			},
			goToNewsListPage() {
				uni.navigateTo({
					url: '/pages/news/list'
				});
			},
			goToNewsDetailPage(id) {
				uni.navigateTo({
					url: `/pages/news/detail?id=${id}`
				});
			},
			goSelectSite() {
				uni.navigateTo({
					url: '/pages/mine/select-site'
				});
			},
			goInviteBusiness() {
				uni.navigateTo({
					url: '/pages/mine/invite-business'
				});
			},
			goParkOrProject() {
				uni.navigateTo({
					url: '/pages/mine/park_or_project'
				});
			},
			goGardengat() {
				uni.navigateTo({
					url: '/pages/gardengat/gardengat'
				});
			}
		}
	};
</script>

<style>
	.xfx-ssearch {
		margin-top: 15rpx;
		position: absolute;
		top: 15%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 800;
		font-size: 14px;
		background-color: #ffffff;
		width: 81%;
		border-radius: 0.5rem;
	}

	.active {
		background: #fe7743;
	}

	.activegay {
		background: rgb(186, 190, 195);
		color: white;
	}

	.leftVRretive {
		position: relative;
	}

	.leftVR {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 2rem;
		height: 2rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 100%;
		background-size: cover;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.leftVRText {
		padding-top: 0.4rem;
		color: white;
		font-size: 1rem;
	}

	.redianxinxi {
		align-self: center;
		padding: 10px 1.9%;
		margin: 5px auto;
		color: #ffffff;
		font-size: 12px;
		font-weight: 400;
		border-radius: 10px;
		width: 20%;
		text-align: center;
	}

	.list-main {
		margin-left: 12px;
		width: 62%;
	}

	.list-title {
		font-size: 15px;
		font-weight: 600;
		color: #000000;
		letter-spacing: 1px;
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.list-jianjie {
		height: 28px;
		font-size: 13px;
		font-weight: 400;
		color: #000000;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		margin-top: 10px;
	}

	.list-content {
		height: 28px;
		font-size: 13px;
		font-weight: 400;
		color: #000000;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		margin-top: 10px;
	}
</style>